<template>
	<m-layout title="支付银行卡" gap="24">
		<template slot="right" v-if="!this.userinfo.bankcard">
			<text style="font-size: 30rpx;" @click="Jump('/pages/mine/bankList/addEdit')">添加银行卡</text>
		</template>
		<template v-for="(item,index) in bankCardList">
			<view class="flex-between" >
				<m-block gap="30" spa="0 0 20" class=" card-box">
					<view class="head flex-between">
						<view class="left">
							<text>{{item.bankName | nikeName(2)}}</text>
							<text>储蓄卡</text>
						</view>

						<text>···· {{item.bankCardNo | bankNoStr}}</text>
					</view>
					<view class="footer flex">
						<view class="" v-if="item.isDefault">
							<m-icon size="32" type="icon-chenggong" color="#FA2B47"></m-icon>
							<text>默认</text>
						</view>
						<!-- <view class="" @click="showPopup(item)">
							<m-icon size="32" type="icon-shanchu" color="##999999"></m-icon>
							<text>删除</text>
						</view> -->
						<view class=""
							@click.stop="Jump('/pages/wallet/bankCard/bankCard?bankCardNo='+item.bankCardNo+'&bankName='+item.bankName)">
							<m-icon size="32" type="icon-bianji" color="##999999"></m-icon>
							<text>编辑</text>
						</view>
					</view>
				</m-block>
			</view>
		</template>
		<m-empty :loading="isLoading" :list="bankCardList"></m-empty>
		<m-dialog :isShow="isShow" title="提示" @handleConfirm="onDelete" :showCancel="true"
			@handleCancel="isShow = false">
			<view class="hint">
				确定删除该银行卡吗？
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { mycards } from "@/api/Cards.js"
	
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				delOb: {},
				isShow: false,
				isEditor: false,
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: false,
			};
		},
		onLoad() {
			// GetUsersBankCardDataList()
			this.getmycardsFn()
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				nowBankCard: state => state.user.nowBankCard,
				// bankCardList: state => state.user.bankCardList,
			}),
			bankCardList() {
				if (!this.userinfo.bankcard) return []
				return [{
					bankName: this.userinfo.bankname,
					bankCardNo: this.userinfo.bankcard,
					isDefault: 1,
				}]
			}
		},
		methods: {
			// 获取的绑卡列表
			async getmycardsFn() {
				const { success, list, totalCount, pageCount } = await mycards({
					state: 0
				})
			},
			showPopup(item) {
				this.delOb = item;
				this.isShow = true;
			},
			async onDelete() {
				const { success, msg, data } = await DeleteUsersBankCard({
					bankCardCode: this.delOb.bankCardCode
				})
				if (success) {
					this.isShow = false;
					this.delOb = {};
				}
			},
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, totalPage } = await test({
					type: this.tabIndex + 1,
					pageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = totalPage;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			// this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.card-box {
		flex: 1;

		.head {
			padding-bottom: 30rpx;

			.left {
				text:nth-of-type(1) {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				text:nth-of-type(2) {
					background: rgba(0, 0, 0, 0.1);
					margin-left: 10rpx;
					padding: 1rpx 10rpx;

					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			&>text {
				font-size: 42rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.footer {
			border-top: 1px solid #EEEEEE;
			padding-top: 30rpx;
			justify-content: flex-end;

			&>view {
				margin-left: 20rpx;
				display: flex;
				align-items: center;

				text {
					margin-left: 5rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}

	.hint {
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.btn-box {
		padding: 30rpx 24rpx;
	}
</style>